<template>
  <header class="navbar">
    <span>通用后台管理系统</span>
    <el-dropdown @command="handleCommand">
      <span class="user-info el-dropdown-link">
        <el-avatar :size="32"  />
        <span class="username">管理员</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">个人信息</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { ElMessage } from 'element-plus';
import {useAuthStore} from '@/stores/auth';
const router = useRouter();

function handleCommand(command) {
  if (command === 'profile') {
    router.push('/user/profile');
  } else if (command === 'logout') {
    // 这里可添加退出登录逻辑
    useAuthStore().logout()
        ElMessage.success('正在退出登录...');
    //延时跳转
    setTimeout(() => {
      router.push('/login');
      ElMessage.success('退出登录成功');
    }, 1000);
  }
}
</script>

<style scoped>
.navbar {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-size: 18px;
  color: #223047;
  justify-content: space-between;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 20px;
  transition: background 0.2s;
}
.user-info:hover {
  background: #f0f1f5;
}
.username {
  font-size: 15px;
  color: #223047;
}
/* 去除element-plus下拉触发区域的黑色边框 */
.el-dropdown-link:focus {
  outline: none !important;
  box-shadow: none !important;
}
.el-dropdown-link:active {
  outline: none !important;
  box-shadow: none !important;
}
</style>
